import * as THREE from 'three'
import { stats } from '../stats'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

function createCourse24 (dom: HTMLElement) {
  const scene = new THREE.Scene()

  const camera = new THREE.PerspectiveCamera(75, dom.offsetWidth / dom.offsetHeight, 0.01, 1000)
  camera.position.set(50, 50, 50)

  const render = new THREE.WebGLRenderer()
  render.setSize(dom.offsetWidth, dom.offsetHeight)
  render.shadowMap.enabled = true

  dom.appendChild(render.domElement)

  const axes = new THREE.AxesHelper(100)
  scene.add(axes)

  const controls = new OrbitControls(camera, render.domElement)
  controls.update()

  const cubeGeometry = new THREE.BoxGeometry(20, 20, 20)
  const meshMaterial = new THREE.MeshNormalMaterial()
  const cube = new THREE.Mesh(cubeGeometry, meshMaterial)

  const dir = new THREE.Vector3(0, 0, 5)
  dir.normalize()
  const orgin = new THREE.Vector3(0, 5, 0)
  const length = 30
  const color = 0xffffff
  const arrowHelper = new THREE.ArrowHelper(dir, orgin, length, color)
  cube.add(arrowHelper)
  scene.add(cube)

  const sphereGeometry = new THREE.SphereGeometry(14, 20, 20)
  const meshMaterial2 = new THREE.MeshNormalMaterial()
  // meshMaterial2.flatShading = true;
  const sphere = new THREE.Mesh(sphereGeometry, meshMaterial2)
  sphere.position.set(40, 0, 0)

  const textloader = new THREE.TextureLoader()
  textloader.load('https://dongli-three.oss-cn-shanghai.aliyuncs.com/alphaMap.jpg', function (map) {
    // meshMaterial2.bumpMap = map;
    meshMaterial2.normalMap = map
    // meshMaterial2.bumpScale = 0.5;

    // meshMaterial2.displacementMap = map;
    // meshMaterial2.displacementScale = 10;
    meshMaterial2.needsUpdate = true
  })

  scene.add(sphere)

  render.setAnimationLoop(anmation)

  function anmation () {
    stats.update()
    render.render(scene, camera)
  }

  return { camera, scene, render }
}

export {
  createCourse24
}
